
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>投诉页面</title>
        <link href="css/styles.css" th:href="@{/css/styles.css}" rel="stylesheet"/>
        <link href="css/dataTables.bootstrap4.min.css" th:href="@{/css/dataTables.bootstrap4.min.css}" rel="stylesheet" crossorigin="anonymous">
        <script src="js/all.min.js" th:src="@{/js/all.min.js}" crossorigin="anonymous"></script>
    </head>
    <body class="sb-nav-fixed">
    <!--公共部分-->
    <div th:replace="commons/bar::topbar"></div>
        <div id="layoutSidenav">
            <div id="layoutSidenav_nav">
                <div th:replace="commons/bar::sidebar"></div>
            </div>

            <div id="layoutSidenav_content">
                <main>
                    <div class="container-fluid">
                        <h1 class="mt-4">用户投诉</h1>
                        <ol class="breadcrumb mb-4">
                            <li class="breadcrumb-item"><a th:href="@{/user22}">主页</a></li>
                            <li class="breadcrumb-item active">用户投诉</li>
                        </ol>
                        <div class="card mb-4">
                            <div class="card-header"><i class="fas fa-user" aria-hidden="true"></i>用户投诉管理</div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                        <thead class="thead-light">
                                        <tr>
                                            <th>#</th>
                                            <th>用户ID</th>
                                            <th>投诉日期</th>
                                            <th style="width: 35%;word-break:break-all;word-wrap:break-word;">投诉内容</th>
                                            <th>是否处理</th>
                                            <th style="width: 18%">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="cp_data">

                                        </tbody>
                                    </table>
                                    <!-- 分页条 -->
                                    <div class="row">
                                        <!-- 分页文字信息 -->
                                        <div class="col-md-6" id="page_info_area">
                                            <!-- <h4>当前页第*页,总页码：,总记录：</h4> -->
                                        </div>
                                        <!-- 分页条信息 -->
                                        <div class="col-md-6" id="page_nav_area"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
                <footer class="py-4 bg-light mt-auto">
                    <div class="container-fluid">
                        <div class="d-flex align-items-center justify-content-between small">
                            <div class="text-muted">Copyright &copy; Your Website 2020</div>
                            <div>
                                <a href="#">联系：m15952086301@163.com</a>
                            </div>
                        </div>
                    </div>
                </footer>
            </div>
            <!--反馈模态框-->
            <div class="modal fade" id="cpModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">反馈</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <span class="help-block text-danger" id="info"></span>
                                <div class="form-group">
                                    <label for="cpText" class="col-form-label">填写反馈内容：</label>
                                    <textarea class="form-control" id="cpText"></textarea>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="cp_sub">提交</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--详细信息模态框-->
            <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="ModalLabel">用户信息</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group row">
                                    <label for="userName" class="col-sm-3 col-form-label text-danger">用户姓名：</label>
                                    <div class="col-sm-7">
                                        <input type="text" readonly class="form-control-plaintext text-muted" id="userName">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="userAge" class="col-sm-3 col-form-label text-danger">用户年龄：</label>
                                    <div class="col-sm-7">
                                        <input type="text" readonly class="form-control-plaintext text-muted" id="userAge">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="userGender" class="col-sm-3 col-form-label text-danger">用户性别：</label>
                                    <div class="col-sm-7">
                                        <input type="text" readonly class="form-control-plaintext text-muted" id="userGender">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="userTel" class="col-sm-3 col-form-label text-danger">用户手机号：</label>
                                    <div class="col-sm-7">
                                        <input type="text" readonly class="form-control-plaintext text-muted" id="userTel">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="js/jquery-3.4.1.min.js" th:src="@{/js/jquery-3.4.1.min.js}" crossorigin="anonymous"></script>
        <script src="js/bootstrap.bundle.min.js" th:src="@{/js/bootstrap.bundle.min.js}" crossorigin="anonymous"></script>
        <script src="js/scripts.js" th:src="@{/js/scripts.js}"></script>
        <script src="js/jquery.dataTables.min.js" th:src="@{/js/jquery.dataTables.min.js}" crossorigin="anonymous"></script>
        <script src="js/dataTables.bootstrap4.min.js" th:src="@{/js/dataTables.bootstrap4.min.js}" crossorigin="anonymous"></script>
        <!--<script src="js/datatables-demo.js" th:src="@{/js/datatables-demo.js}"></script>-->
    <script type="text/javascript">
        $(function() {
            to_page(1);
        })
        function to_page(pn) {
            $.ajax({
                url:"/complainList/",
                type:"GET",
                data:"pn="+pn,
                success:function(result){
                    //1.投诉数据信息
                    bulid_cp_table(result);
                    //2.显示分页信息
                    build_page_info(result);
                    //3.解析并显示分页信息
                    build_page_nav(result);
                }
            });
        }
        //显示校验的提示信息
        function show_validate_msg(ele,status,msg){
            //清楚当前元素的校验状态
            $(ele).parent().removeClass("has-success has-error");
            $(ele).next("span").text();
            if("success"==status){
                $(ele).parent().addClass("has-success");
                $(ele).next("span").text(msg);
            }else if("error"==status){
                $(ele).parent().addClass("has-error");
                $(ele).next("span").text(msg);
            }
        }
        //日期格式
        Date.prototype.format = function(fmt) {
            var o = {
                "M+" : this.getMonth()+1,                 //月份
                "d+" : this.getDate(),                    //日
                "h+" : this.getHours(),                   //小时
                "m+" : this.getMinutes(),                 //分
                "s+" : this.getSeconds(),                 //秒
                "q+" : Math.floor((this.getMonth()+3)/3), //季度
                "S"  : this.getMilliseconds()             //毫秒
            };
            if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
            }
            for(var k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt;
        }
        //表格数据
        function bulid_cp_table(result){
            //清空table表格数据
            $("#cp_data").empty();
            var cp = result.extend.pageInfo.list;
            $.each(cp,function(index,item){
                var cpidTd=$("<td></td>").append(item.cpid);
                var useridTd=$("<td></td>").append(item.userid);
                var cpdate = new Date(item.cpdate).format("yyyy-MM-dd hh:mm:ss");
                var cpdateTd=$("<td></td>").append(cpdate);
                var cptextTd=$("<td></td>").append(item.cptext);
                var psTd = $("<td></td>").append(item.ps);
                var cpBtn=$("<button></button>").addClass("btn btn-primary btn-sm cp_btn")
                    .append($("<span></span>").append("反馈"));
                var delBtn=$("<button></button>").addClass("btn btn-danger btn-sm del_btn")
                    .append($("<span></span>").append("删除"));

                var userBtn=$("<button></button>").addClass("btn btn-info btn-sm user_btn")
                    .append($("<span></span>").append("用户信息"));
                var btnTd=$("<td></td>").append(cpBtn).append(" ").append(delBtn).append(" ").append(userBtn);
                cpBtn.attr("cp_id",item.cpid).attr("user_id",item.userid);
                userBtn.attr("user_id",item.userid)
                delBtn.attr("del_id",item.cpid);
                //append方法执行完成以后还是返回原来的元素
                $("<tr></tr>")
                    .append(cpidTd)
                    .append(useridTd)
                    .append(cpdateTd)
                    .append(cptextTd)
                    .append(psTd)
                    .append(btnTd)
                    .appendTo("#cp_data");
            });
        }
        /**************************分页信息********************************************************/
        //解析显示分页信息
        function build_page_info(result) {
            $("#page_info_area").empty();
            var page_area = result.extend.pageInfo;
            $("#page_info_area").append($("<h5></h5>").append("当前页："+page_area.pageNum+",总页数："+page_area.pages+",总记录数："+page_area.total));
            totalRecord = page_area.total;
            currentPage = page_area.pageNum;
        }
        //解析分页条数据，点击分页要能到下一页
        function build_page_nav(result){
            $("#page_nav_area").empty();
            var ul=$("<ul></ul>").addClass("pagination");
            var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").addClass("page-link").attr("href","#"));
            var prePageLi=$("<li></li>").append($("<a></a>").addClass("page-link").append("&laquo;"));
            //如果不存在上一页，首页和上一页按钮禁用，如果存在上一页，可以进行点击事件（不会发请求）
            if(result.extend.pageInfo.hasPreviousPage==false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }else{
                //点击事件
                firstPageLi.click(function(){
                    to_page(1);
                });
                prePageLi.click(function(){
                    to_page(result.extend.pageInfo.pageNum-1);
                });
            }
            var nextPageLi=$("<li></li>").append($("<a></a>").addClass("page-link").append("&raquo;"));
            var lastPageLi=$("<li></li>").append($("<a></a>").addClass("page-link").append("末页").attr("href","#"));
            if(result.extend.pageInfo.hasNextPage==false){
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            }else{
                //点击事件
                nextPageLi.click(function(){
                    to_page(result.extend.pageInfo.pageNum+1);
                });
                lastPageLi.click(function(){
                    to_page(result.extend.pageInfo.pages);
                });
            }
            ul.append(firstPageLi).append(prePageLi);
            //遍历给UL中添加页码提示
            $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
                var numLi=$("<li></li>").append($("<a></a>").addClass("page-link").append(item));
                if(result.extend.pageInfo.pageNum==item){
                    numLi.addClass("text-primary");
                }
                numLi.click(function(){
                    to_page(item);
                });
                ul.append(numLi);

            });
            ul.append(nextPageLi).append(lastPageLi);
            var navEle=$("<nav></nav>").append(ul);
            navEle.appendTo("#page_nav_area");
        }
        /***************************************分页信息*****************************************************/

        //清空表单样式以及内容
        function rest_form(ele){
            $(ele)[0].reset();
            $(ele).find("*").removeClass("has-success has-error");
            $(ele).find(".help-block").text("");
        }
        //点击反馈按钮，弹出模态框
        $(document).on("click",".cp_btn",function(){
            rest_form("#cpModal form");
            //将反馈id传入到提交按钮上
            $("#cp_sub").attr("cp_id",$(this).attr("cp_id"));
            $("#cp_sub").attr("user_id",$(this).attr("user_id"));
            //弹出模块矿，静态、esc关闭
            $('#cpModal').modal({
                keyboard:true,
                backdrop:"static"
            })
        });
        //点击删除按钮事件
        $(document).on("click",".del_btn",function(){
            var cpId = $(this).attr("del_id");
            if(confirm("确定删除ID:"+cpId+"的投诉数据吗？")){
                //如果点击确定，发送ajax请求去删除
                $.ajax({
                    url: "/deleteCp/"+cpId,
                    type: "DELETE",
                    success: function(result){
                        to_page(currentPage);
                    }
                });
            }
        })
        //点击提交按钮，在反馈列表中插入反馈的信息
        $(document).on("click","#cp_sub",function(){
            var userid = $("#cp_sub").attr("user_id");
            var cptext = $("#cpText").val();
            var cpid = $("#cp_sub").attr("cp_id");
            if(cptext == ""){
                $("#info").text("请输入反馈内容！");
                return false;
            }
            $.ajax({
                url:"/insertCpText/",
                type:"POST",
                data:{cpid:cpid,fdtext:cptext,userid:userid},
                success:function(result){
                    $('#cpModal').modal('hide');
                    updatePS();
                }
            });
        });
        //更改处理状态（更改为已处理）
        function updatePS() {
            var cpid = $("#cp_sub").attr("cp_id");
            $.ajax({
                url:"/updatePs",
                type:"PUT",
                data:{cpid:cpid},
                success:function(result){
                    to_page(currentPage);
                }
            });
        }
        //点击用户信息按钮，弹出模态框
        $(document).on("click",".user_btn",function(){
            var userid = $(this).attr("user_id");
            getUser(userid);
            //弹出模块矿，静态、esc关闭
            $('#userModal').modal({
                keyboard:true,
                backdrop:"static"
            })
        });
        function getUser(userid){
            $.ajax({
                url:"/queryUserByID/"+userid,
                type:"GET",
                success:function(result){
                    var user = result.extend.users;

                    $('#userName').val(user.username);
                    $('#userAge').val(user.userage);
                    $('#userTel').val(user.usertel);
                    $("#userGender").val(user.usergender=='M'?'男':'女');
                }
            });
        }
    </script>
    </body>
</html>
